<template>
  <div class="passport-container">
    <van-form
      class="passport-form"
      ref="form"
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-field
        v-model="username"
        name="username"
        placeholder="帐号名称/手机号码"
        left-icon="mobile"
        icon-prefix="my-icon"
        :rules="rules.username"
        @input="onValidateInput"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        left-icon="lock"
        icon-prefix="my-icon"
        placeholder="请输入密码"
        :rules="rules.password"
        @click-right-icon="showActionSheet"
        @input="onValidateInput"
      >
        <template slot="right-icon">
          无法登录？
        </template>
      </van-field>

      <div class="passport-form-action">
        <van-button
          round
          block
          type="warning"
          native-type="submit"
          :disabled="disableSubmit"
        >
          提交
        </van-button>
      </div>
    </van-form>

    <van-action-sheet
      v-model="showAction"
      close-on-click-action
      :actions="actions"
      @select="onActionSelect"
      description="请选择你遇到的问题"
    />

    <div
      class="change-loginmode"
      v-if="otherMode"
    >
      <van-button
        icon="arrow"
        :to="otherMode.redirect"
        replace
      >
        {{otherMode.text}}
      </van-button>
    </div>
  </div>
</template>
<script>
import {
  Row,
  Col,
  Cell,
  Button,
  CellGroup,
  Form,
  Field,
  Area,
  Icon,
  Image,
  Popup,
  ActionSheet,
  Lazyload
} from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Form.name]: Form,
    [Area.name]: Area,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Image.name]: Image,
    [ActionSheet.name]: ActionSheet,
    Lazyload
  },
  data () {
    return {
      username: '',
      password: '',
      showAction: false,
      actions: [
        {
          name: '忘记密码',
          className: {
            name: 'passport/reset'
          },
          redirect: {
            name: 'passport/reset'
          }
        },
        {
          name: '找回帐号',
          className: {
            name: 'passport/forget'
          },
          redirect: {
            name: 'passport/forget'
          }
        }
      ],
      errors: null,
      disableSubmit: true,
      rules: {
        username: [
          {
            required: true,
            message: '请输入您的登录帐号或者手机号'
          }
        ],
        password: [{ required: true, message: '请输入帐号密码' }]
      },
      otherMode: {
        text: '手机短信快捷登录',
        redirect: {
          name: 'passport/login/sms'
        },
        replace: true
      }
    }
  },

  created () {
    console.group('Login')
    this.$route.meta.title = '帐号密码登录'
    this.onLoad()

    console.groupEnd('Login')
  },

  methods: {
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
      this.errors = errorInfo.errors
    },
    showActionSheet () {
      this.showAction = true
    },
    onActionSelect (item) {
      this.$router.push(item.redirect)
    },
    onLoad () {
      // console.log(this.$parent)
      // this.$parent.fatherMethod('hello')
      // this.$emit('view', '投注站')
      // let dd = '/login'
      // console.log('dd', /\/login|\/authorize/g.test(dd))
      // console.log('dd2aaaaaaaaaaaaaaaaaaaaaaa')
    },
    onSubmit (data) {
      console.log('submit', data)
      this.disableSubmit = true
      this.$http.passport.login(data).then(res => {
        if (res.data) {
          this.$emit('logged', res.data)
        } else {
          this.$toast('提交失败~')
          this.disableSubmit = false
        }
      })
    },
    onValidateInput (value) {
      this.$refs.form
        .validate()
        .then(() => {
          this.disableSubmit = false
        })
        .catch(e => {
          this.disableSubmit = true
        })
    }
  }
}
</script>
